<template>
  <div class="grey_bg">
    <navigate>赴约前置任务</navigate>
    <div class="main_content">
      <div class="doing_tip" v-if="listEvaluate.length != 0">
        本次赴约前需完成如下测评任务：
      </div>

      <div class="task_list">
        <div class="block_item" v-for="(r, i) in listEvaluate" :key="i">
          <img class="row_img" :src="joinUrlImg(r.task_icon_url)" alt="" />
          <div class="row_middle">
            <div class="row_name">{{ r.task_name }}</div>
            <div :class="['row_status', { done_over: r.is_over_scale != 1 }]">
              <template v-if="r.is_over_scale == 1">
                <img src="@/assets/images/consult/success_1.png" alt="" />
                <div>已完成</div>
              </template>
              <template v-else>
                <div>完成状态：</div>
                <div>未完成</div>
              </template>
            </div>
          </div>
          <button
            class="btn row_btn flex_row flex_align_center nowrap flex_center_jc"
            @click="lookResult(r)"
            :disabled="r.is_look == 0"
            :class="{ is_disabled: r.is_look == 0 }"
            v-if="r.is_over_scale == 1"
          >
            查看结果
          </button>
          <button
            @click="enterEvaluate(r)"
            class="btn row_btn flex_row flex_align_center nowrap flex_center_jc"
            v-if="r.is_over_scale != 1"
          >
            进入测评
          </button>
        </div>
      </div>

      <div class="doing_tip" v-if="listSelf.length != 0">
        本次赴约前需完成近况自评表：
      </div>

      <div class="block_item" v-for="(item, index) in listSelf" :key="index">
        <img class="row_img" src="@/assets/images/consult/self.png" alt="" />
        <div class="row_middle">
          <div class="row_name">个人近况自评表</div>
          <div
            :class="[
              'row_status',
              { done_over: item.is_over_self_assessment == 0 },
            ]"
          >
            <template v-if="item.is_over_self_assessment != 0">
              <img src="@/assets/images/consult/success_1.png" alt="" />
              <div>已完成</div>
            </template>
            <template v-else>
              <div>完成状态：</div>
              <div>未完成</div>
            </template>
          </div>
        </div>
        <button
          class="btn row_btn flex_row flex_align_center nowrap flex_center_jc"
          @click="fill(item)"
          v-if="item.is_over_self_assessment != 0"
        >
          答题情况
        </button>
        <button
          v-else
          class="btn row_btn flex_row flex_align_center nowrap flex_center_jc"
          @click="fill(item)"
        >
          开始填写
        </button>
      </div>
      <div class="no_more">没有前置任务了</div>
    </div>
  </div>
</template>

<script>
import { apiGetPrepositionTask } from "@/api/consult";
import selfAssessment from "@/views/core/selfAssessment.vue";
import http from "@/server/http";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  components: {
    "self-assessment": selfAssessment,
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    //结束

    joinUrlImg,
    // 开始填写
    async fill(item) {
      if (this.calcEnd || this.calcBlackWhite) {
        return;
      }
      if (item.is_read == 0) {
        await this.readTask(item.id, 2, 0);
      }
      this.$router.push(
        `/selfAssessment/${item.is_over_self_assessment == 0 ? 1 : 2}/${
          item.id
        }`
      );
    },
    // 查看结果
    async lookResult(r) {
      if (r.is_read == 0) {
        await this.readTask(r.cp_id, 1, 0);
      }
      if (r.is_look != 0) {
        this.$router.push(`/evaluateExport/${r.report_id || 0}`);
      }
    },
    // 进入测评
    async enterEvaluate(r) {
      if (this.calcEnd || this.calcBlackWhite) {
        return;
      }
      if (r.is_read == 0) {
        await this.readTask(r.id, 2, 0);
      }
      this.$router.push(
        `/normalAnswer/${r.cp_rating_scale_id}/${r.cp_task_id}/0/0`
      );
    },
    async getPrepositionTask() {
      const { data } = await apiGetPrepositionTask({
        id: this.$route.params.id,
      });
      if (data.code == 200) {
        this.listSelf = data.data.zp_task;
        this.listEvaluate = data.data.cp_task;
      }
    },
    async readTask(id, type, uid) {
      await http({
        url: "/psychological/scheduling/set_dot",
        method: "POST",
        data: { id, type, uid },
      });
    },
    async getDetailsInfo() {
      let { data } = await http({
        url: "/psychological/scheduling/offline_appointment_record_details2",
        method: "POST",
        data: {
          id: this.$route.params.id,
        },
      });
      if (data.code == 200) {
        this.detailInfo = data.data;
      }
    },
  },
  created() {
    this.getPrepositionTask();
    this.getDetailsInfo();
  },
};
</script>

<style scoped>
.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}
.task_list {
  display: grid;
  gap: 10.42px;
}
.block_item {
  width: 100%;
  height: 104.17px;
  background: #ffffff;
  border-radius: 6.94px;
  box-sizing: border-box;
  padding: 0 10.42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.main_content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10.42px;
  box-sizing: border-box;
  display: grid;
  gap: 10.42px;
  align-content: flex-start;
  padding: 14.58px 10.42px 38.19px 10.42px;
  box-sizing: border-box;
}
.doing_tip {
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #888888;
  font-size: 14.58px;
}
.row_img {
  width: 69.44px;
  height: 69.44px;
  background: rgba(241, 232, 190, 0);
  border-radius: 6.94px;
  margin-right: 14.58px;
}
.row_middle {
  width: 144.44px;
  height: 49.32px;
  margin-right: 26.74px;
  display: grid;
  align-content: center;
}
.row_name {
  height: 49.32px;
  line-height: 24.66px;
  margin-bottom: 1.03px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15.97px;
}
.row_btn {
  width: 76.39px;
  height: 34.72px;
  border-radius: 6.94px;
  font-size: 13.19px;
}
.is_disabled {
  opacity: 0.5;
}
.row_status {
  height: 22.93px;
  line-height: 22.93px;
  display: flex;
  align-items: center;
  gap: 6.25px;
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #14c76a;
}
.row_status img {
  width: 14.58px;
  height: 14.58px;
}
div.done_over {
  font-size: 13.19px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
}
</style>
